import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_axrjc/style.dart';
import 'package:flutter_axrjc/widget/custom_text_field.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:url_launcher/url_launcher_string.dart';

import 'logic.dart';

class LoginPage extends StatelessWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<LoginLogic>();
    final state = Get.find<LoginLogic>().state;

    return Scaffold(
      backgroundColor: const Color(0xffF3F6F9),
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(top: 40, left: 40),
                      child: Obx(() {
                        return Text(
                          state.type.value == 0 ? "登录安信睿检测" : "注册安信睿检测",
                          style: const TextStyle(fontSize: 24),
                        );
                      }),
                    ),
                    const SizedBox(
                      height: 40,
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 20),
                      child: Column(
                        children: [
                          Row(
                            children: [
                              InkWell(
                                onTap: () {},
                                child: const Row(
                                  children: [
                                    Text("+86"),
                                    Icon(
                                      Icons.arrow_drop_down,
                                      color: Colors.grey,
                                    )
                                  ],
                                ),
                              ),
                              Expanded(
                                child: Obx(() {
                                  return CustomTextField(
                                    keyboardType: TextInputType.number,
                                    inputFormatters: [
                                      FilteringTextInputFormatter.digitsOnly
                                    ],
                                    value: state.phone.value,
                                    onChanged: (text) {
                                      state.phone.value = text;
                                    },
                                    inputDecoration: const InputDecoration(
                                        hintStyle: TextStyle(
                                            fontSize: 14, color: Colors.grey),
                                        contentPadding:
                                            EdgeInsets.symmetric(vertical: 5),
                                        hintText: "请输入手机号码",
                                        isDense: true,
                                        isCollapsed: true,
                                        border: InputBorder.none),
                                  );
                                }),
                              ),
                            ],
                          ),
                          Divider(
                            color: Colors.grey.withAlpha(50),
                          ),
                        ],
                      ),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    Obx(() {
                      if (state.type.value == 0) {
                        return Container();
                      }
                      return Column(
                        children: [
                          Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 20),
                            child: Column(
                              children: [
                                Row(
                                  children: [
                                    const Padding(
                                      padding: EdgeInsets.all(8.0),
                                      child: Text("验证码"),
                                    ),
                                    Expanded(
                                      child: Obx(() {
                                        return CustomTextField(
                                          value: state.yzm.value,
                                          onChanged: (text) {
                                            state.yzm.value = text;
                                          },
                                          inputDecoration:
                                              const InputDecoration(
                                                  hintStyle: TextStyle(
                                                      fontSize: 14,
                                                      color: Colors.grey),
                                                  contentPadding:
                                                      EdgeInsets.symmetric(
                                                          vertical: 5),
                                                  hintText: "请输入验证码",
                                                  isDense: true,
                                                  isCollapsed: true,
                                                  border: InputBorder.none),
                                        );
                                      }),
                                    ),
                                    InkWell(
                                      onTap: logic.sendSmsCode,
                                      child: Padding(
                                        padding: const EdgeInsets.all(8.0),
                                        child: Obx(() {
                                          return Text(
                                            state.buttonText.value,
                                            style: const TextStyle(
                                                fontSize: 12,
                                                color: orangeColor),
                                          );
                                        }),
                                      ),
                                    )
                                  ],
                                ),
                                Divider(
                                  color: Colors.grey.withAlpha(50),
                                ),
                              ],
                            ),
                          ),
                          const SizedBox(
                            height: 10,
                          ),
                        ],
                      );
                    }),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 20),
                      child: Column(
                        children: [
                          Row(
                            children: [
                              const Padding(
                                padding: EdgeInsets.all(8.0),
                                child: Text("密码"),
                              ),
                              Expanded(
                                child: Obx(() {
                                  return CustomTextField(
                                    obscureText: !state.showPassword.value,
                                    maxLines: 1,
                                    value: state.password.value,
                                    onChanged: (text) {
                                      state.password.value = text;
                                    },
                                    inputDecoration: InputDecoration(
                                        contentPadding:
                                            const EdgeInsets.symmetric(
                                                vertical: 5),
                                        hintText: "6-12位字母数字组合",
                                        hintStyle: const TextStyle(
                                            fontSize: 14, color: Colors.grey),
                                        isDense: true,
                                        suffix: InkWell(
                                          onTap: () {
                                            state.showPassword.value =
                                                !state.showPassword.value;
                                          },
                                          child: Obx(() {
                                            return Container(
                                              color: Colors.transparent,
                                              child: state.showPassword.value
                                                  ? const Icon(Icons
                                                      .remove_red_eye_outlined)
                                                  : const Icon(
                                                      Icons.remove_red_eye),
                                            );
                                          }),
                                        ),
                                        isCollapsed: true,
                                        border: InputBorder.none),
                                  );
                                }),
                              ),
                            ],
                          ),
                          Divider(
                            color: Colors.grey.withAlpha(50),
                          ),
                        ],
                      ),
                    ),
                    InkWell(
                      onTap: () {
                        state.isCheck.value = !state.isCheck.value;
                      },
                      child: Padding(
                        padding: const EdgeInsets.symmetric(
                            vertical: 8, horizontal: 20),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Obx(() {
                              if (state.isCheck.value) {
                                return const Icon(
                                  Icons.check_box,
                                  color: orangeColor,
                                );
                              } else {
                                return const Icon(
                                  Icons.check_box_outline_blank,
                                  color: orangeColor,
                                );
                              }
                            }),
                            10.horizontalSpace,
                            const Text("记住密码")
                          ],
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 10, vertical: 50),
                      child: InkWell(
                        onTap: logic.next,
                        child: Container(
                            padding: const EdgeInsets.symmetric(
                                horizontal: 10, vertical: 13),
                            decoration: BoxDecoration(
                                gradient: const LinearGradient(
                                    begin: Alignment.topRight,
                                    end: Alignment.bottomLeft,
                                    colors: [
                                      Color(0xffF7D25D),
                                      Color(0xffE3801D)
                                    ]),
                                borderRadius: BorderRadius.circular(20)),
                            child: Center(child: Obx(() {
                              return Text(
                                state.type.value == 0 ? "登录" : "注册",
                                style: const TextStyle(color: Colors.white),
                              );
                            }))),
                      ),
                    ),
                    Center(
                      child: InkWell(
                        onTap: () {
                          if (state.type.value == 0) {
                            state.type.value = 1;
                          } else {
                            state.type.value = 0;
                          }
                        },
                        child: Container(
                          padding: const EdgeInsets.all(8.0),
                          child: Obx(() {
                            return Text(
                              state.type.value == 0 ? "没有账号去注册" : "有账号去登录" '',
                              style: const TextStyle(
                                  fontSize: 14, color: Color(0xff666666)),
                            );
                          }),
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Icon(
                    Icons.check_circle,
                    color: Colors.orange,
                    size: 18,
                  ),
                  Text.rich(TextSpan(children: [
                    const TextSpan(
                        text: "同意",
                        style:
                            TextStyle(fontSize: 12, color: Color(0xffA9A9A9))),
                    TextSpan(
                      text: "《用户协议》",
                      style: const TextStyle(fontSize: 12, color: orangeColor),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          launchUrlString(
                              "http://axrled.nat300.top/AxrLedServer/app/processSysConfigView/1");
                        },
                    ),
                    const TextSpan(
                        text: "&",
                        style:
                            TextStyle(fontSize: 12, color: Color(0xffA9A9A9))),
                    TextSpan(
                      text: "《隐私政策》",
                      style: const TextStyle(fontSize: 12, color: orangeColor),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          launchUrlString(
                              "http://axrled.nat300.top/AxrLedServer/app/processSysConfigView/2");
                        },
                    ),
                  ])),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}
